import echarts from 'echarts';

export default class HistogramChart {
    constructor(domId, dataArray) {
        this.chart = echarts.init(document.getElementById(domId));
        this.chart.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            color: ['#3398DB'],
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // legend: {
            //     orient: 'vertical',
            //     right: '10%',
            //     top: '30%',
            //     data: dataArray.map((item) => {
            //         return item.name;
            //     }),
            //     textStyle: {
            //         fontSize: '12',
            //         color: 'rgba(255, 255, 255, 0.5)'
            //     }
            // },
            xAxis : [
                {
                    type : 'category',
                    data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'预警数量',
                    type:'bar',
                    barWidth: '60%',
                    data:[10, 52, 200, 334, 390, 330, 220]
                }
            ]
        });
        this.chart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
        });
        document.getElementById(domId).addEventListener('mouseover', () => {
            this.chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0
            });
        });

        document.getElementById(domId).addEventListener('mouseout', () => {
            this.chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: 0
            });
        });
    }
}